<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/input.css">
</head>
<body>
<div class="container">
    <div class="chat-container" id="chatContainer">
        <div class="message bot">
            <div class="message-content">
                您好！这是一个优化后的聊天输入框，您可以：
                <ul style="margin-top: 10px; padding-left: 20px;">
                    <li>在下方输入文本内容</li>
                    <li>粘贴图片或文件（Ctrl+V）</li>
                    <li>拖放文件到输入区域</li>
                    <li>点击📎按钮选择文件</li>
                    <li>按Enter键发送消息和文件</li>
                    <li>输入长文本时使用滚动条查看</li>
                </ul>
            </div>
        </div>
    </div>

<!--    <div class="input-container">-->
<!--        <div class="toolbar">-->
<!--            <div class="toolbar-button" title="表情">😊</div>-->
<!--            <div class="toolbar-button" title="图片">🖼️</div>-->
<!--            <label for="fileInput" class="toolbar-button" title="附件">📎</label>-->
<!--            <input type="file" id="fileInput" multiple class="hidden">-->

<!--            <div class="file-previews" id="filePreviews"></div>-->
<!--        </div>-->

<!--        <div class="input-area">-->
<!--            <div class="input-box" id="inputBox" contenteditable="true"></div>-->
<!--            <div class="placeholder">输入消息...（支持粘贴文件，按Enter发送）</div>-->
<!--        </div>-->

<!--        <div class="enter-hint">按Enter发送，Shift+Enter换行</div>-->

<!--        <div class="action-buttons">-->
<!--            <button id="clearBtn" class="secondary">-->
<!--                <span>清空</span>-->
<!--            </button>-->
<!--            <button id="sendBtn">-->
<!--                <span>发送</span>-->
<!--            </button>-->
<!--        </div>-->
<!--    </div>-->

    <div class="input-container">
        <div class="toolbar">
            <div class="toolbar-button" title="表情">😊</div>
            <div class="toolbar-button" title="图片">🖼️</div>
            <label for="fileInput" class="toolbar-button" title="附件">📎</label>
            <input type="file" id="fileInput" multiple class="hidden">

            <div class="file-previews" id="filePreviews"></div>
        </div>

        <div class="input-area">
            <div class="input-box" id="inputBox" contenteditable="true"></div>

            <div class="placeholder">输入消息...（支持粘贴文件，按Enter发送）</div>
        </div>

        <div class="enter-hint">按Enter发送，Shift+Enter换行</div>
    </div>

</div>

<script>
    // 全局状态
    const state = {
        files: []
    };

    // DOM元素
    const inputBox = document.getElementById('inputBox');
    const fileInput = document.getElementById('fileInput');
    const filePreviews = document.getElementById('filePreviews');
    const clearBtn = document.getElementById('clearBtn');
    const sendBtn = document.getElementById('sendBtn');
    const chatContainer = document.getElementById('chatContainer');

    // 文件类型图标映射
    const fileIcons = {
        'pdf': '📄',
        'doc': '📄',
        'docx': '📄',
        'txt': '📄',
        'mp4': '🎬',
        'avi': '🎬',
        'mov': '🎬',
        'mp3': '🎵',
        'wav': '🎵',
        'zip': '📦',
        'rar': '📦',
        'xls': '📊',
        'xlsx': '📊',
        'ppt': '📊',
        'pptx': '📊'
    };

    // 初始化事件监听
    function init() {
        // 粘贴事件
        inputBox.addEventListener('paste', handlePaste);

        // 拖放事件
        inputBox.addEventListener('dragover', handleDragOver);
        inputBox.addEventListener('dragleave', handleDragLeave);
        inputBox.addEventListener('drop', handleDrop);

        // 文件选择
        fileInput.addEventListener('change', handleFileSelect);

        // 按钮事件
        clearBtn.addEventListener('click', clearInput);
        sendBtn.addEventListener('click', sendMessage);

        // Enter键发送事件
        inputBox.addEventListener('keydown', handleKeyDown);
    }

    // 处理按键事件
    function handleKeyDown(e) {
        // 按Enter键发送消息
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    }

    // 处理粘贴事件
    function handlePaste(e) {
        const items = e.clipboardData.items;

        for (let i = 0; i < items.length; i++) {
            const item = items[i];

            if (item.kind === 'file') {
                e.preventDefault();
                const file = item.getAsFile();
                addFile(file);
            }
        }
    }

    // 处理拖放事件
    function handleDragOver(e) {
        e.preventDefault();
        inputBox.classList.add('drag-over');
    }

    function handleDragLeave() {
        inputBox.classList.remove('drag-over');
    }

    function handleDrop(e) {
        e.preventDefault();
        inputBox.classList.remove('drag-over');

        if (e.dataTransfer.files.length > 0) {
            const files = Array.from(e.dataTransfer.files);
            files.forEach(file => addFile(file));
        }
    }

    // 处理文件选择
    function handleFileSelect(e) {
        const files = Array.from(e.target.files);
        files.forEach(file => addFile(file));
        // 重置input，允许选择相同文件
        e.target.value = '';
    }

    // 添加文件
    function addFile(file) {
        state.files.push(file);
        renderFilePreview(file);
    }

    // 渲染文件预览
    function renderFilePreview(file) {
        const previewItem = document.createElement('div');
        previewItem.className = 'file-preview-item';
        previewItem.setAttribute('data-file-name', file.name);

        // 获取文件扩展名
        const fileExt = file.name.split('.').pop().toLowerCase();
        const fileIcon = fileIcons[fileExt] || '📁';

        if (file.type.startsWith('image/')) {
            const img = document.createElement('img');
            img.src = URL.createObjectURL(file);
            previewItem.appendChild(img);
        } else {
            const icon = document.createElement('div');
            icon.className = 'file-icon';
            icon.textContent = fileIcon;
            previewItem.appendChild(icon);
        }

        const removeBtn = document.createElement('button');
        removeBtn.className = 'remove-btn';
        removeBtn.textContent = '×';
        removeBtn.setAttribute('title', '删除文件');
        removeBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            removeFile(file);
            previewItem.remove();
        });
        previewItem.appendChild(removeBtn);

        filePreviews.appendChild(previewItem);
    }

    // 移除文件
    function removeFile(file) {
        state.files = state.files.filter(f => f !== file);
    }

    // 获取输入内容
    function getInputContent() {
        return {
            text: inputBox.innerText,
            html: inputBox.innerHTML,
            files: [...state.files]
        };
    }

    // 清空输入
    function clearInput() {
        inputBox.innerHTML = '';
        state.files = [];
        filePreviews.innerHTML = '';
    }

    // 发送消息
    function sendMessage() {
        const content = getInputContent();

        if (!content.text.trim() && content.files.length === 0) {
            return;
        }

        // 添加用户消息
        addMessage(content, true);

        // 模拟机器人回复
        setTimeout(() => {
            addMessage({
                text: '已收到您的消息' + (content.files.length > 0 ?
                    `和${content.files.length}个文件` : ''),
                html: '',
                files: []
            }, false);
        }, 1000);

        // 清空输入
        clearInput();
    }

    // 添加消息到聊天窗口
    function addMessage(content, isUser) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${isUser ? 'user' : 'bot'}`;

        const contentDiv = document.createElement('div');
        contentDiv.className = 'message-content';

        if (content.files.length > 0) {
            const filesDiv = document.createElement('div');
            filesDiv.style.marginTop = '10px';
            filesDiv.style.display = 'flex';
            filesDiv.style.flexWrap = 'wrap';
            filesDiv.style.gap = '8px';

            content.files.forEach(file => {
                const fileDiv = document.createElement('div');
                fileDiv.style.padding = '5px 10px';
                fileDiv.style.background = 'rgba(0,0,0,0.05)';
                fileDiv.style.borderRadius = '12px';
                fileDiv.style.fontSize = '14px';

                // 获取文件扩展名
                const fileExt = file.name.split('.').pop().toLowerCase();
                const fileIcon = fileIcons[fileExt] || '📁';

                fileDiv.innerHTML = `${fileIcon} ${file.name}`;
                filesDiv.appendChild(fileDiv);
            });

            contentDiv.appendChild(filesDiv);
        }

        if (content.text) {
            const textDiv = document.createElement('div');
            textDiv.textContent = content.text;
            contentDiv.appendChild(textDiv);
        }

        messageDiv.appendChild(contentDiv);
        chatContainer.appendChild(messageDiv);

        // 滚动到底部
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
